<template>
	<div class="Registration">

		<div class="card-top">
			<div class="circle iconfont icon-gou2"></div>
			
			<div class="card-top-right">
				<div>  
					<div class="register"> 挂号成功 </div>
						
					<div class="intime">请及时就诊 </div>
				</div>
				<div class="erweima">
					<div class="iconfont icon-qrcode1"></div>
					<div class="click"> 点击出示 </div>
					
				</div>
			</div>
		</div>
		
		
		<div class="box-center">
			
			<text style="color: #aeb0b0;margin-right: 20px;"> 排队号 </text>
			<text> 0000000876567 </text>
			
		</div>

		<div class="card-bottoms">
			
			
			
			
			
			<div class="person-box">
				<text> 陈欢霞 </text>

				<text> 电话 : 13680273664 </text>
			</div>


			<div class="info">
				<div class="info-item">
					<div class="key">医院 </div>

					<div class="value"> 广东省中医院 </div>
				</div>
				<div class="info-item">
					<div class="key">科室 </div>
				
					<div class="value"> {{optiondoctorInfo}} </div>
				</div>
				<div class="info-item">
					<div class="key">类别 </div>
				
					<div class="value"> 普通号 </div>
				</div>
				<div class="info-item">
					<div class="key">医生 </div>
				
					<div class="value"> {{optionname}} </div>
				</div>
				<div class="info-item">
					<div class="key">就诊时间 </div>
				
					<div class="value"> 2023年07月31日{{optionvalue}} </div>
				</div>
				<div class="info-item">
					<div class="key">挂号费用 </div>
				
					<div class="value"> ￥{{optionprice}} </div>
				</div>

			</div>

		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: 1,
				optiondoctorInfo: "",
				optionname: "",
				optionprice: "",
				optionvalue: "",
				data: ""
			}
		},
		methods: {
			
		},
		onLoad(option) {
			this.optionname = option.optionname
			this.optiondoctorInfo = option.optiondoctorInfo
			this.optionprice = option.optionprice
			this.optionvalue = option.optionvalue
			this.data = new Date().getTime();
		
		}
	}
</script>

<style lang="scss">
	* {
		padding: 0px;
		margin: 0px;
	}

	.Registration {
		width: 100%;
		height: 100vh;
		background-color: #ededed;
		position: relative;
		.box-center{
			width: 95%;
			height: 50px;
			position: absolute;
			top: 97px;
			left: 10px;
			background-color: #fefefe;
			border-radius: 5px;
			padding: 16px;
			box-sizing: border-box;
			
		}
		.card-top{
			width: 100%;
			height: 120px;
			background-color:#13af93 ;
			box-sizing: border-box;
			padding-left: 16px;
			padding-right: 16px;
			display: flex;
			align-items: center;
			.circle{
				width: 50px;
				height: 50px;
				background-color: #f4fefd;
				border-radius:50% ;
				font-size: 30px;
				text-align: center;
				line-height: 50px;
				font-weight: 900;
				color: #13af93;
				margin-right: 20px;
				
			}
			.card-top-right{
				flex: 1;
				display: flex;
				justify-content: space-between;
				.register{
					font-size: 22px;
					color: #f5fffd;
				}
				.intime{
					color: #f5fffd;
				}
				.erweima{
					width: 50px;
					height: 55px;
					background-color: #55c4af;
					border-radius: 3px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.iconfont{
						color: #f5fffd;
						font-size: 20px;
					}
					.click{
						color: #f5fffd;
						font-size: 8px;
						transform: scale(0.9);
					}
				}

			}
		}
		
		.card-bottoms{
			margin: 50px auto;
			width: 95%;
			background-color: #fefefe;
			padding:10px;
			box-sizing: border-box;
			border-radius: 5px;
			.person-box{
				display: flex;
				justify-content: space-between;
				height: 50px;
				border-bottom: 2px solid #f6f6f6;
				line-height: 50px;
				font-size: 20px;
				font-weight: 500;
			}
			.info{
				.info-item{
					display: flex;
					margin-top: 10px;
					.key{
						width: 100px;
						height: 40px;
					   color: #b7bab9;
					  
				    }
					
				}
				
				
			}
		}
	}
</style>